<template>
	<view class="home">
		<view class="house-top">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
				activeColor="#006eff">
			</uni-segmented-control>
		</view>
		<view class="house-item">
			<view class="content">
				<view class="content0" v-show="current === 0">
					<view class="active-body" v-for="v in houseMag" :key="v.id">
						<view @click="house(v.id)">
							<view class="active-body-item">
								<view class="item-box">
									<view class="item-boxText">
										<text>{{v.housingResource}}</text>
									</view>
									<view class="item-boxImg">
										<img :src="v.housePhoto">
									</view>
								</view>
								<view class="item-text">
									<view class="top">
										<text>{{v.rentalWay}} {{v.houseType}}</text>
									</view>
									<view class="bottom">
										<text>{{v.buildingArea}}</text>
										<text id="money">￥{{v.rent}}/月</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content1" v-show="current === 1">
					<view class="active-body" v-for="v in houseMag" :key="v.id">
						<view @click="house(v.communityId)">
							<view class="active-body-item">
								<view class="item-box">
									<view class="item-boxText">
										<text>{{v.housingResource}}</text>
									</view>
									<view class="item-boxImg">
										<img :src="v.housePhoto">
									</view>
								</view>
								<view class="item-text">
									<view class="top">
										<text>{{v.rentalWay}} {{v.houseType}}</text>
									</view>
									<view class="bottom">
										<text>{{v.buildingArea}}</text>
										<text id="money">￥{{v.rent}}/月</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content2" v-show="current === 2">
					<view class="active-body" v-for="v in houseMag" :key="v.id">
						<view @click="house(v.communityId)">
							<view class="active-body-item">
								<view class="item-box">
									<view class="item-boxText">
										<text>{{v.housingResource}}</text>
									</view>
									<view class="item-boxImg">
										<img :src="v.housePhoto">
									</view>
								</view>
								<view class="item-text">
									<view class="top">
										<text>{{v.rentalWay}} {{v.houseType}}</text>
									</view>
									<view class="bottom">
										<text>{{v.buildingArea}}</text>
										<text id="money">￥{{v.rent}}/月</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-fab ref="fab" :pattern="pattern" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @fabClick="fabClick" />
	</view>
</template>

<script>
	import {
		http
	} from "../../utils/http.js"
	export default {
		data() {
			return {
				items: ['全部房源', '整租', '合租'],
				current: 0,
				rentalWay: "",
				houseMag: [],
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				
			};
		},
		methods: {
			fabClick() {
				uni.navigateTo({
					url: '../HouseRental/chooseHouse/chooseHouse'
				});
			},
			house(v) {
				uni.navigateTo({
					url: '../HouseRental/houseDetails/houseDetails?id=' + v
				});
			},
			getData() {
				if (this.current == 2) {
					this.rentalWay = "合租"
				} else if (this.current == 1) {
					this.rentalWay = "整租"
				} else {
					this.rentalWay = ""
				}
				http({
					url: "/houseRent/list",
					method: "post",
					data: {
						rentalWay: this.rentalWay
					}
				}).then((res) => {
					console.log(res)
					if (res.code == 0) {
						this.houseMag = res.data;
					} else {
						console.log("数据接收失败")
					}

				})

			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
				this.getData()
			},


		},
		onLoad() {
			this.getData()
		},
	};
</script>

<style lang="less">
	.home {
		height: 100%;
		padding: 40rpx;
		display: flex;
		flex-direction: column;

		.house-top {
			display: flex;
			align-items: center;
			justify-content: center;

			.segmented-control {
				width: 496rpx;
				height: 58rpx;
			}
		}

		.house-item {
			.content {

				.content0,
				.content1,
				.content2,
					{
					.active-body {
						height: 100%;

						.active-body-item {
							border: 1px solid #e1e1e1;
							border-radius: 8px;
							height: 210rpx;
							margin: 20rpx 0;
							display: flex;
							justify-content: space-evenly;
							align-items: center;
							box-shadow: 0px 0px 15rpx rgba(0, 0, 0, .2);

							.item-box {
								width: 226rpx;
								height: 162rpx;
								background-color: #e6f1ff;
								border-radius: 8px;
								margin: 0 10px;

								.item-boxText {
									width: 132rpx;
									height: 50rpx;
									background-color: #28d374;
									color: aliceblue;
									border-radius: 8rpx;
									position: absolute;

									text {
										display: flex;
										justify-content: center;
										align-items: center;
									}
								}

								.item-boxImg {
									img {
										border-radius: 8px;
										width: 226rpx;
										height: 162rpx;
									}


								}
							}

							.item-text {
								flex: 1;

								.top {
									margin-bottom: 8px;
								}

								.bottom {
									display: flex;
									flex-direction: column;
									font-size: 24rpx;
									color: #b8b8b8;

									#money {
										color: #f67979;
										font-size: 32rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
